<template>
    <el-card >      
        <el-container>
            <el-header>
                <el-button type="primary" size="small" @click="addC">新增分类</el-button>
                <el-button type="warning" size="small" @click="addImage">新增图片</el-button>
            </el-header>
        <el-container>
            <left @selectCatgrayId="getSid" ref="leftRef"></left>
            <right :catgaryId="sid" > </right>
            <!-- <el-aside  class="aside" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(255, 255, 255, 0.8)">
                <div class="catgray" :class="defaultActive == catgray.pk ? 'active' : ''"  v-for="(catgray, index) in catgrayList" :key="index" @click="selectCatgray(catgray.pk)">
                    <el-text truncated>{{catgray.fields.name}}</el-text>
                    <div style="display: flex; justify-content: space-around;margin-left: 20px;">
                        <el-button link type="primary"><el-icon><Edit/></el-icon></el-button>
                        <el-button link type="primary"><el-icon><Close /></el-icon></el-button>
                    </div>
                </div>
                
            </el-aside> -->
            <!-- <el-main>
                <el-row >
                <el-col :span="6" :gutter="20" v-for="(image, index) in imageList" :key="index" >
                    <el-card shadow="hover" style="margin-left:5px;margin-bottom:5px">
                        <el-image
                      
                        :src=" image.url "
                        style="width: 100%"
                        />
                        <el-text truncated class="imageName">{{ image.name }} </el-text>
                        <div style="display: flex; justify-content: space-around; margin-top: -20px">
                            <el-link type="primary" @click="updateImageName(image.name)">重命名</el-link>
                            <el-link type="warning" >删除</el-link>
                        </div>
                    </el-card>
                </el-col>
                
                </el-row>
            </el-main> -->
        </el-container>
        </el-container>
    </el-card>
    <!-- <FormDrawer ref="formDrawerRef" :title="catGrayTitle" size="30%" @submit="handleSubmit">
        <template #title>新增分类</template>
        <template #default>
            <el-form label-width="80px" :rules="rules" ref="formRef" :model="form">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="form.name" style="width: 90%"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </template>
    </FormDrawer> -->
</template>
<script setup>
import {  computed,ref,reactive } from 'vue'
import { getImageList,getImageClassList,updateImageClass,deleteImageClass,createImageClass } from '@/api/image_class'
import FormDrawer from "@/components/FormDrawer.vue"
import left from './left.vue';
import right from './right.vue';
// 拆分
const sid = ref(0)
const getSid = (id) => {
    console.log('getSid',id)
    sid.value = id
}
// 调取左边的方法
const leftRef = ref(null)

const addC = () => {
    leftRef.value.addCatgray()
}


// 获取图片列表
const imageList = ref([])
getImageList(1,10).then(res => {
    imageList.value = res.list
})
// 点击分类
const selectCatgray = (id) => {
    defaultActive.value = id
    getImageList(id,10).then(res => {
        imageList.value = res.list
    })
}


// 图片重命名
const updateImageName = (name) => {
    console.log(name)
}
// 新增图片
const addImage = () => {
    console.log("addImage")
}
</script>

<style scoped>

.menuItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.is-active{
    background-color:#EDF5FF
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 10px;
}
:deep(.el-card__body) {
    padding: 0px!important;
}
.el-main{
    padding-top:0px!important;
}
.imageName{
    text-align: center;display: block;position: relative; bottom: 25px; 
    color: #fff;
}
.catgray{
    display: flex;
    justify-content: space-around; 
    padding:10px;  
    cursor: pointer;
}
.catgray:hover,.active{
    background-color: #EDF5FF;
}
</style>